<template>
  <div id="boat_search">
    <row>
      <i-col span="17">
        <bread-crumb module-name="进行中" module-link="/stone" feature-name="创建" feature-link=""
                     activity-name=""/>
      </i-col>
      <i-col span="7">
        <tool-bar :refresh="true" :help="true"></tool-bar>
      </i-col>
    </row>
    <div class="boat_input_panel">
      <Form ref="boatInfo" :model="boatInfo" :rules="ruleValidate" label-width="100">
        <div class="boat_input_sec">
          <h1>基本信息</h1>
          <row class-name="boat_input_row">
            <i-col span="8">
              <Form-item label="名称：" prop="boatName">
                <Input v-model="boatInfo.boatName" placeholder="名称..." style="width: 80%"></Input>
                <Tooltip>
                  <Icon type="help-circled"></Icon>
                  <div slot="content">
                    <p>酷炫的名称</p>
                    <p>比如High爆海天盛宴</p>
                  </div>
                </Tooltip>
              </Form-item>
            </i-col>
            <i-col span="8">
            <Form-item label="日期：" prop="boatName">
              <DatePicker :value="stoneDate" type="date" placeholder="选择日期" style="width: 80%"></DatePicker>
            </Form-item>
          </i-col>
            <i-col span="8">
              <Form-item label="时间：" prop="boatName">
                <TimePicker format="HH:mm" placeholder="选择时间" style="width: 80%"></TimePicker>
              </Form-item>
            </i-col>
          </row>

          <row class-name="boat_input_row">
            <i-col span="8">
              <Form-item label="目标召集人数：" prop="cabNumbers">
              <Input-number :max="100" :min="1" v-model="boatInfo.cabNumbers" style="width: 80%"></Input-number>
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="最少人数：" prop="capacity">
              <Input-number :max="100" :min="1" v-model="boatInfo.capacity" style="width: 80%"></Input-number>
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="最大人数：" prop="beds">
              <Input-number :max="100" :min="0" v-model="boatInfo.beds" style="width: 80%"></Input-number>
              </Form-item>
            </i-col>
          </row>
          <row>
            <i-col span="4">
              <span class="input_field_name">位置：{{this.boatInfo.latlgt}} </span>
            </i-col>
            <i-col span="20">
              <div class="amap-page-container">
                <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
                <el-amap vid="amapDemo" :center="mapCenter" :zoom="12" class="amap-demo">
                  <el-amap-marker v-for="marker in markers" :position="marker" ></el-amap-marker>
                </el-amap>
              </div>

            </i-col>
          </row>
        </div>


        <div class="boat_input_sec">
          <h1>上传照片 <Tooltip>
            <Icon type="help-circled"></Icon>
            <div slot="content">
              <p>详情图,在详情页轮播显示</p>
            </div>
          </Tooltip>
          </h1>

          <div class="boat-upload-list" v-for="item in this.boatInfo.attributeList">
            <template v-if="item.status === 'finished'">
              <img :src="item.value">
              <div class="boat-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleViewImage(item.name)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemoveImage(item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
          </div>

          <Upload
            ref="upload"
            :show-upload-list="false"
            :default-file-list="defaultList"
            :on-success="handleUploadSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="8192"
            :on-format-error="handleUploadFormatError"
            :on-exceeded-size="handleUploadMaxSize"
            :before-upload="handleBeforeUpload"
            multiple
            type="drag"
            action="http://localhost:8082/upload"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="camera" size="20"></Icon>
            </div>
          </Upload>
          <Modal title="查看图片" v-model="visible">
            <img :src="'http://ou3lgzjko.bkt.clouddn.com/' + imgName" v-if="visible" style="width: 100%">
          </Modal>
        </div>

        <div class="boat_input_sec">
          <h1>活动简介</h1>
          <row class-name="boat_input_row">
            <i-col span="3"><a class="input_field_name">关于您的召集石：</a></i-col>
            <i-col span="21">
                <Input v-model="aboutBoat" type="textarea" :rows="4" placeholder="有关您的召集的故事..."/>
            </i-col>
          </row>
          <row>

          </row>
          <row class-name="boat_input_row">
            <i-col span="3"><a class="input_field_name">关于您的活动周边：</a></i-col>
            <i-col span="21"><Input v-model="aboutAround" type="textarea" :rows="4"
                                    placeholder="好的餐厅、游玩地地、不可错失的地方等和可去的地方..."/></i-col>
          </row>
        </div>


        <div class="boat_input_sec">
          <Button type="info" @click="handleSubmitBoat('boatInfo')">保存</Button>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
  import BreadCrumb from '../Breadcrumb.vue'
  import ToolBar from '../ToolBar.vue'
  import { mapGetters } from 'vuex'
  import ICol from '../../../node_modules/iview/src/components/grid/col'
  export default {
    components: {
      ICol,
      BreadCrumb,
      ToolBar
    },
    name: 'stone-add',
    data () {
      return {
        stoneDate: '',
        boatInfo: {
          name: '',
          boatName: '',
          hullNumber: '',
          boatType: '',
          hasCaptain: 1,
          ownership: '',
          builder: '',
          model: '',
          length: '',
          width: '',
          draft: '',
          cabNumbers: 1,
          capacity: 1,
          beds: 1,
          locations: [],
          location: '',
          aboutBoat: '',
          aboutAround: '',
          unit: 'M',
          mainImg: '',
          equipName: [],
          equips: [],
          priceList: [
            {
              currency: '',
              price: '',
              settlePrice: '',
              duration: '',
              from: '',
              fromDate: '',
              to: '',
              toDate: ''
            }
          ],
          attributeList: [
            {
              type: '',
              name: '',
              value: ''
            }
          ],
          enginBrand: '',
          enginModel: '',
          enginMaker: '',
          enginNum: '',
          fuel: '',
          oilconsum: '',
          power: '',
          maxSpeed: '',
          latlgt: ''
        },
        locationCenter: {
          lat: 31.13227755,
          lng: 121.87971954
        },
        markers: [
          [116.410362, 39.881479]
        ],
        searchOption: {
          city: '北京',
          citylimit: false
        },
        mapCenter: [116.410362, 39.881479],
        circleBounds: {},
        allAttributes: [],
        indeterminate: true,
        checkAll: false,
        equipName: [],
        unitLabel: '',
        boatTypeList: [
          {label: '帆船', value: 'SAILBOAT'},
          {label: '机动游艇', value: 'MOTORBOAT'},
          {label: '双体帆船', value: 'CATAMARAN'},
          {label: '鱼钓船', value: 'FISHINGBOAT'},
          {label: '橡皮艇', value: 'RIB'},
          {label: '摩托艇', value: 'JETSKI'},
          {label: '房艇', value: 'HOUSEBOAT'},
          {label: '皮划艇', value: 'KAYAK'},
          {label: '培训', value: 'LESSONS'},
          {label: '水上运动', value: 'WATERSPORTS'},
          {label: '观光艇', value: 'TOURS'}
        ],
        currencyList: [
          {label: '人民币', value: 'RMB'},
          {label: '美元', value: 'Dollar'},
          {label: '欧元', value: 'EUR'},
          {label: '澳元', value: 'AD'}
        ],
        currency: '人民币',
        locationList: [],
        equipmentCodeGroup: [{
          id: 0,
          code: '',
          name: '',
          dictItemList: [
            {
              id: 0,
              code: '',
              name: '',
              groupId: 0
            }
          ]
        }],
        imgName: '',
        visible: false,
        ruleValidate: {
          boatName: [
            {required: true, message: '名称不能为空', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '名称不能为空', trigger: 'blur'}
          ],
          location: [
            {required: true, message: '地点不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    mounted () {
    },
    computed: {
      ...mapGetters(['showSearchFilter'])
    },
    methods: {
      onSearchResult (pois) {
        let latSum = 0
        let lngSum = 0
        if (pois.length > 0) {
          pois.forEach(poi => {
            let {lng, lat} = poi
            lngSum += lng
            latSum += lat
            this.markers.push([poi.lng, poi.lat])
            this.markers[0].draggable = true
          })
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
          }
          this.mapCenter = [center.lng, center.lat]
        }
      },

      handleCheckAll () {
        if (this.indeterminate) {
          this.checkAll = false
        } else {
          this.checkAll = !this.checkAll
        }
        this.indeterminate = false

        for (var i = 0; i < this.equipmentCodeGroup.length; i++) {
          for (var j = 0; j < this.equipmentCodeGroup[i].dictItemList.length; j++) {
            this.allAttributes.push(this.equipmentCodeGroup[i].dictItemList[j].name)
          }
        }

        if (this.checkAll) {
          this.boatInfo.equipName = this.allAttributes
        } else {
          this.boatInfo.equipName = []
        }
      },
      equipGroupChange (data) {
        if (data.length === this.allAttributes.length) {
          this.indeterminate = false
          this.checkAll = true
        } else if (data.length > 0) {
          this.indeterminate = true
          this.checkAll = false
        } else {
          this.indeterminate = false
          this.checkAll = false
        }
      },
      locationChange () {
        this.boatInfo.location = this.boatInfo.locations.join(',')
      },
      addPriceItem () {
        var priceItem = {
          currency: '',
          price: '',
          duration: '',
          from: '',
          to: ''
        }
        this.boatInfo.priceList.push(priceItem)
      },
      removePriceItem (index) {
        this.boatInfo.priceList.splice(index, 1)
      },
      changeUnit () {
        if (this.unitLabel === '米') {
          this.boatInfo.unit = 'M'
        }
        if (this.unitLabel === '英尺') {
          this.boatInfo.unit = 'FT'
        }
      },
      priceFromPicked (priceData) {
        priceData.from = parseInt(priceData.fromDate / 1000)
      },
      priceToPicked (priceData) {
        priceData.to = parseInt(priceData.toDate / 1000)
      },
      handleViewImage (name) {
        this.imgName = name
        this.visible = true
      },
      handleRemoveImage (file) {
        // 从 upload 实例删除数据
        const fileList = this.$refs.upload.fileList
        this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
      },
      handleUploadSuccess (res, file) {
        file.value = res.uploaded[0]
        var spstr = file.value.split('/')
        file.name = spstr[spstr.length - 1]
        file.type = 2
      },
      handleUploadMainSuccess (res) {
        this.boatInfo.mainImg = res.uploaded[0]
      },
      handleUploadFormatError (file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
        })
      },
      handleUploadMaxSize (file) {
        this.$Notice.warning({
          title: '超出文件大小限制',
          desc: '文件 ' + file.name + ' 太大，不能超过 8M。'
        })
      },
      handleBeforeUpload () {
        const check = this.boatInfo.attributeList.length < 10
        if (!check) {
          this.$Notice.warning({
            title: '最多只能上传 10 张图片。'
          })
        }
        return check
      },
      updateCircle (prop, value) {
        if (prop === 'radius') {
          this.radius = value
        } else if (prop === 'bounds') {
          this.circleBounds = value
          var arr = this.circleBounds.toString().split('), (')
          var sw = arr[0].substring(2).split(',')
          var ne = arr[1].substring(0, arr[1].length - 2).split(',')
          var south = parseFloat(sw[0])
          var west = parseFloat(sw[1])
          var north = parseFloat(ne[0])
          var east = parseFloat(ne[1])
          var lat = (south + north) / 2
          var lng = (west + east) / 2
          this.boatInfo.latlgt = lat + ',' + lng
          this.locationCenter.lat = lat
          this.locationCenter.lng = lng
        }
      },
      handleSubmitBoat (formName) {
        this.$router.push({name: 'Home', params: {isShowWindow: true}})
      }
    }
  }
</script>
<style scoped="">

  .amap-demo {
    height: 300px;
  }

  .search-box {
    position: absolute;
    top: 25px;
    left: 20px;
  }

  .amap-page-container {
    position: relative;
    width: 900px;
    heigth: 300px;
  }

  .boat_input_panel {
    display: block;
    background: #fff;
    padding: 10px 10px 10px 30px;
    min-height: 1000px;
  }

  .boat_input_sec {
    margin-top: 20px;
    margin-bottom: 30px;
    display: block;
    overflow: hidden;
    height: auto;
  }

  .boat_input_sec_inline {
    margin-top: 20px;
    margin-bottom: 30px;
    display: block;
    overflow: hidden;
    height: auto;
    display: inline;
  }

  .boat_input_sec h1 {
    border-left: 3px solid #ff5a5f;
    font-size: 18px;
    font-weight: 300;
    font-color: rgba(60, 63, 64, 0.9);
    border-bottom: 1px solid #c5c5c5;
  }

  .boat_input_sec h2 {
    font-size: 16px;
    font-weight: 300;
    font-color: rgba(60, 63, 64, 0.9);
    padding-left: 20px;
  }

  .boat_input_sec_inline h1 {
    border-left: 3px solid #ff5a5f;
    font-size: 18px;
    font-weight: 300;
    font-color: rgba(60, 63, 64, 0.9);
    border-bottom: 1px solid #c5c5c5;
  }

  .boat_price_action {
    margin-top: 10px;
    margin-right: 20px;
  }

  .boat_input_row {
    margin-top: 10px;
    height: 40px;
  }

  .input_field_name {
    color: rgba(60, 63, 64, 0.9);
    line-height: 30px;
  }


  .boat-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .boat-upload-list img{
    width: 100%;
    height: 100%;
  }
  .boat-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .boat-upload-list:hover .boat-upload-list-cover{
    display: block;
  }
  .boat-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
  .map-container {
    width: 90%;
    height: 300px;
  }
</style>
